<template>
  <div class="__progress" :style="{'--h': strokeWidth+'px','--dbc': defineBackColor, '--br': borderRadius+'px'}">
    <div class="__bar" :style="{'--w': percentage+'%', '--c': color}"></div>
  </div>
</template>

<script>
  export default {
    name: 'index',
    components: {},
    props: {
      percentage: {
        type: Number,
        required: true,
        validator: (val) => {
          return val >= 0 && val <=100 // 0-100
        },
        default: 0 // 百分比
      },
      strokeWidth: {
        type: Number,
        default: 4
      },
      color: {
        type: String,
        default: '#3B9DF7'
      },
      defineBackColor: {
        type: String,
        default: 'rgba(0,183,254,0.2)'
      },
      borderRadius: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {}
    },
    mounted() {
    },
    methods: {}
  }
</script>

<style scoped lang="scss">
.__progress {
  width: 100%; height: var(--h);
  background-color: var(--dbc);
  border-radius: var(--br); overflow: hidden;
  .__bar {
    height: 100%; width: var(--w); background-color: var(--c);
  }
}
</style>
